<template>
    <el-container direction="vertical" v-if="listView">
        <el-row>
            <el-col :span="24">
                <h1>用户管理&nbsp;>&nbsp;用户列表</h1>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8">
                <el-form-item label="登录名:">
                    <el-input v-model="queryParam.loginName" placeholder="请输入登录名" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="姓名:">
                    <el-input v-model="queryParam.name" placeholder="请输入姓名" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="手机号:">
                    <el-input v-model="queryParam.mobile" placeholder="请输入手机号" clearable />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="16">
            </el-col>
            <el-col :span="8">
                <el-row justify="end">
                    <el-button type="primary" @click="search">搜索</el-button>
                    <el-button type="default" @click="clear">重置</el-button>
                </el-row>
            </el-col>            
        </el-row>
        <el-row>
            <el-col :span="24">
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-row justify="start">
                    <el-button type="primary" @click="accountCreate">+新增</el-button>
                </el-row>
            </el-col>
        </el-row>
        <el-table :data="view.list"
            tooltip-effect="dark"
            style="width:100%">
            <el-table-column
                label="登录名"
                width="250"
                prop="loginName">
            </el-table-column>
            <el-table-column
                label="姓名"
                width="150"
                prop="name">
            </el-table-column>
            <el-table-column
                label="手机号"
                width="200"
                prop="mobile">
            </el-table-column>
            <el-table-column
                label="操作">
                <template #default="scope">
                    <el-button @click="accountEdit(scope.row)" type="default">
                        编辑
                    </el-button>
                    <el-button @click="accountDelete(scope.row)" type="danger">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background
            v-model:page-size="view.pageInfo.pageSize"
            layout="prev, pager, next"
            :current-page="view.pageInfo.current" 
            @current-change="currentChange"
            :pageCount="view.pageInfo.total%view.pageInfo.pageSize==0 ? view.pageInfo.total/view.pageInfo.pageSize : Math.floor(view.pageInfo.total/view.pageInfo.pageSize)+1" />
    </el-container>
    <el-container direction="vertical" v-else>
        <Item :item="view.item" @onCancel="switchPage"></Item>
    </el-container>
</template>
<script>
import Item from './Item.vue';
import {ElMessage} from "element-plus"

export default{
    data(){
        return {
            listView:true,
            queryParam:{
                loginName:"",
                name:"",
                mobile:"",
                pageInfo:{
                    current:1,
                    pageSize:10
                },
                order:{
                    columnName:"",
                    sortValue:""
                }
            },
            view:{
                list:[],
                item:{
                    id: null,
                    name:"",
                    loginName:"",
                    password:"",
                    passwordR:"",
                    mobile:"",
                    email:""
                },
                pageInfo:{}
            }
        }
    },
    mounted(){
        this.search()
    },
    methods:{
        switchPage:function(v){
            this.listView = v;
            if(v){
                this.view.item = {}
                this.query()
            }
        },
        search:function(){
            this.queryParam.pageInfo.current=1
            this.query()
        },
        query:function(){
            this.axios.post("/backend/admin/account/paging",this.queryParam).then((r)=>{
                if(r.status == 200){
                    this.view = r.data.data
                    this.queryParam.pageInfo=r.data.data.pageInfo
                }
            })
        },
        clear:function(){
            this.queryParam = {
                loginName:"",
                name:"",
                mobile:"",
                pageInfo:{
                    current:1,
                    pageSize:10
                },
                order:{
                    columnName:"",
                    sortValue:""
                }
            }
            this.search();
        },
        currentChange:function(value){
            this.queryParam.pageInfo.current = value
            this.query()
        },
        accountCreate:function(){
            this.view.item = {
                id: null,
                name:"",
                loginName:"",
                password:"",
                passwordR:"",
                mobile:"",
                email:""
            }
            //this.$forceUpdate()
            this.listView = false
        },
        accountEdit:function(item){
            //http://localhost:8088/iotshudt-web/admin/account/item?id=1000400
            console.log("Variable [item] -> " + item)
            this.view.item = {
                id: item.id,
                name: item.name,
                loginName: item.loginName,
                password:"",
                passwordR:"",
                mobile: item.mobile,
                email: item.email
            }
            this.listView = false
        },
        accountDelete:function(item){
            this.$confirm('你确认要删除该数据?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.axios.post("/backend/admin/account/delete?id=" + item.id).then((r)=>{
                    if(r.status == 200){
                        ElMessage({
                            message:"删除成功",
                            type:"success",
                            duration:3000
                        })
                        this.query()
                    }else{
                        ElMessage({
                            message: r.message,
                            type:"error",
                            duration:3000
                        });
                    }
                })
            }).catch(() => {
                
            })
        }
    },
    components:{
        Item : Item,
    }
}
</script>
<style scope>
.query .el-input {
  --el-input-width: 220px;
}
</style>